<template>
  <div>

    <!--头部开始-->
    <div style="height: 60px; background-color: #8a8aec; display: flex; align-items: center">
      <div style="width: 200px; display: flex; align-items: center; padding-left: 20px">
        <img style="width: 40px" src="@/assets/logo.png">
        <span style="font-size: 20px; color: white; margin-left: 10px">单词管理</span>
      </div>
      <div style="flex: 1"></div>
      <div style="width: fit-content; display: flex; align-items: center; padding-right: 30px">
        <img :src="data.user.avatar || 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'"
             style="width: 40px; height: 40px">
        <span style="color: white;margin-left: 10px">{{data.user.name}}</span>
      </div>

    </div>
    <!--头部结束-->

    <!--    下面部分-->
    <div style="display: flex">

      <!--      左侧导航栏-->
      <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
        <el-menu router :default-active="router.currentRoute.value.path" :default-openeds="['1']" style="border: 0">
          <el-menu-item index="/manager/home">
            <el-icon>
              <House/>
            </el-icon>
            首页
          </el-menu-item>
          <el-menu-item index="/manager/data">
            <el-icon>
              <DataLine/>
            </el-icon>
            数据
          </el-menu-item>
          <el-menu-item index="/manager/article" v-if="data.user.role === 'ADMIN'">
            <el-icon>
              <Document/>
            </el-icon>
            文章管理
          </el-menu-item>
          <el-menu-item index="/manager/department" v-if="data.user.role === 'ADMIN'">
            <el-icon>
              <School/>
            </el-icon>
            部门管理
          </el-menu-item>
          <el-sub-menu index="1" v-if="data.user.role === 'ADMIN'">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/employee">员工信息</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/manager/person">
            <el-icon>
              <InfoFilled/>
            </el-icon>
            个人信息
          </el-menu-item>
          <el-menu-item index="/manager/password">
            <el-icon>
              <Lock/>
            </el-icon>
            修改密码
          </el-menu-item>
          <el-menu-item @click="logout">
            <el-icon>
              <CircleCloseFilled/>
            </el-icon>
            退出登录
          </el-menu-item>

        </el-menu>
      </div>
      <!--      左侧导航栏-->

      <!--      右边主体-->
      <div style="flex: 1; width: 0;background-color: #e7e7f6">
        <RouterView @updateUser="updateUser"/>
      </div>
      <!--      右边主体-->

    </div>
    <!--    下面部分结束-->

  </div>
</template>

<script setup>
import {reactive} from "vue";
import router from "@/router/index.js";

const data = reactive({
  user:JSON.parse(localStorage.getItem('xm-pro-user'))
})

const logout = () => {
  localStorage.removeItem('xm-pro-user') //清除当前登录的用户缓存数据
  location.href = '/login' //退到登陆页面
}

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('xm-pro-user')) //从缓存中拿数据（由person页面更新缓存数据）
}
</script>

<style>
.el-menu .is-active {
  background-color: #e6ecf7;
}

.el-sub-menu__title{
  background-color: white;
}
</style>
